<template>
  <div>

  </div>
</template>

<script>

import * as maptalks from 'maptalks';
import {Coordinate, ui, Util} from 'maptalks';
import CtMapUtils from '../../api/ctMap'

export default {
  name: 'ctMapClusterMarker',
  components: {CtMapUtils},
  props: {
    points: {
      type: Array,
      default() {
        return [];
      },
    },
    zIndex: {
      type: Number,
      default: function () {
        return null
      }
    },
    baseSymbol: {},
    clusterSymbol: {
      type: Object,
      default() {
        return null
      },
    },
    styleTag: {
      type: String,
      default() {
        //  'radiation'  对应 style2 ， 'common'  对应 style1 样式
        return 'radiation'
      },
    },
    // marker 的 事件
    listenEvents: {
      type: Array,
      default() {
        return [];
      },
    },
    lazyRender: {
      type: Boolean,
      default() {
        return false
      }
    },
  },
  data: () => ({
    parentMap: null,
    coordinateList: [],
    clusterLayer: null,
    cluster0: null,
    cluster1: null,
    cluster2: null,
    // 圆环样式
    style1: {
      drawClusterText: true,
      geometryEvents: true,
      single: true,
      maxClusterRadius: 100,
      noClusterWithOneMarker: true,
      maxClusterZoom: 17,
      //"count" is an internal variable: marker count in the cluster.
      symbol: [
        {
          markerType: 'ellipse',
          markerFill: {
            property: 'count',
            type: 'interval',
            stops: [[0, '#53a4f8'], [100, '#53a4f8'], [1000, '#53a4f8']]
          },
          markerFillOpacity: 1,
          markerLineOpacity: 1,
          markerLineWidth: 1,
          markerLineColor: '#53a4f8',
          markerWidth: {property: 'count', type: 'interval', stops: [[0, 30], [100, 34], [1000, 44]]},
          markerHeight: {property: 'count', type: 'interval', stops: [[0, 30], [100, 34], [1000, 44]]}
        },
        {
          markerType: 'ellipse',
          markerFill: {
            property: 'count',
            type: 'interval',
            stops: [[0, '#fff'], [100, '#fff'], [1000, '#fff']]
          },
          markerFillOpacity: 1,
          markerLineOpacity: 1,
          markerLineWidth: 1,
          markerLineColor: '#fff',
          markerWidth: {property: 'count', type: 'interval', stops: [[0, 26], [100, 30], [1000, 40]]},
          markerHeight: {property: 'count', type: 'interval', stops: [[0, 26], [100, 30], [1000, 40]]}
        },
        {
          markerType: 'ellipse',
          markerFill: {
            property: 'count',
            type: 'interval',
            stops: [[0, '#53a4f8'], [100, '#53a4f8'], [1000, '#53a4f8']]
          },
          markerFillOpacity: 1,
          markerLineOpacity: 1,
          markerLineWidth: 1,
          markerLineColor: '#53a4f8',
          markerWidth: {property: 'count', type: 'interval', stops: [[0, 22], [100, 26], [1000, 36]]},
          markerHeight: {property: 'count', type: 'interval', stops: [[0, 22], [100, 26], [1000, 36]]}
        },
      ],
      textSymbol: {
        textFaceName: 'monospace',
        textSize: 13,
        textFill: '#fff'
      }
    },
    // 雷达样式
    style2: {
      drawClusterText: true,
      geometryEvents: true,
      single: true,
      maxClusterRadius: 100,
      noClusterWithOneMarker: true,
      maxClusterZoom: 17,
      symbol: {
        markerFile: {
          property: 'count',
          type: 'interval',
          stops: [
            [0, ''],
            [100, ''],
            [1000, '']
          ]
        },
        markerWidth: {property: 'count', type: 'interval', stops: [[0, 52], [100, 56], [1000, 80]]},
        markerHeight: {property: 'count', type: 'interval', stops: [[0, 52], [100, 56], [1000, 80]]},
      },
      textSymbol: {
        textFaceName: 'monospace',
        textSize: 12,
        textDx: 0,
        textDy: {property: 'count', type: 'interval', stops: [[0, -25], [100, -26], [1000, -38]]},
      },
    },
  }),
  mounted() {
    this.renderCluster()
  },
  methods: {
    renderCluster() {
      const vue = this;
      this.$nextTick(() => {
        if (!vue.points || vue.points.length === 0) {
          if (vue.clusterLayer) {
            vue.clusterLayer.clear()
          }
          return false
        }
        const {map} = this.$parent;
        const arr = [];
        const key2markerMap = new Map()
        // 1.坐标 转换
        vue.coordinateList = vue.localTransformXyBatch(vue.points)
        vue.coordinateList.forEach((userMarkerData) => {
          // 2. 创建 marker
          const marker = new maptalks.Marker(userMarkerData.transformedCoordinate, {zIndex: vue.zIndex == null ? 0 : vue.zIndex});
          marker.mpType = userMarkerData.mpType
          // 3.样式
          if (userMarkerData.markerSymbol) {
            CtMapUtils.markerUtil.ctSetMarkerSymbol(marker, userMarkerData.markerSymbol)
          } else {
            if (vue.baseSymbol) {
              CtMapUtils.markerUtil.ctSetMarkerSymbol(marker, vue.baseSymbol)
            }
          }
          // 3.2 设置默认 infoWindow 窗口 并 添加事件监听
          let newInfoWindow = new ui.InfoWindow({
            title: 'default title',
            content: 'default content',
            custom: false,
            autoCloseOn: 'dblclick' // default  mouse_right_click  close .dblclick: double click other area close
          }).addTo(marker);
          // 3.3 InfoWindow 监听
          if (newInfoWindow) {
            // add showstart showend hide remove
            newInfoWindow.on('add showstart showend hide remove', function (UIComponent) {
              let info_window = UIComponent.target;
              switch (UIComponent.type) {
                case 'add':
                  vue.$emit('infoWindowAdd', info_window, userMarkerData)
                  break
                case 'showstart':
                  vue.$emit('infoWindowShowstart', info_window, userMarkerData)
                  break
                case 'showend':
                  vue.$emit('infoWindowShowend', info_window, userMarkerData)
                  break
                case 'hide':
                  vue.$emit('infoWindowHide', info_window, userMarkerData)
                  break
                case 'remove':
                  vue.$emit('infoWindowRemove', info_window, userMarkerData)
                  break
                default:
                  break
              }
            })
          }
          // 4. marker 添加事件监听 一般是 click
          if (vue.listenEvents) {
            let events = vue.listenEvents.toString().replaceAll(',', ' ')
            marker.on(events, (param) => {
              //  地图 的 标准marker 对象
              let callBackStandardMarker = param.target;
              if (param.type === 'click') {
                vue.$emit('markerClick', callBackStandardMarker, userMarkerData)
              } else if (param.type === 'dblclick') {
                vue.$emit('markerDblClick', callBackStandardMarker, userMarkerData)
              } else {
                vue.$emit('markerNotClick', callBackStandardMarker, userMarkerData)
              }
            });
          }
          arr.push(marker);
          key2markerMap.set(userMarkerData.mpId, marker)
        });
        vue.$emit('clusterMarkers', key2markerMap)
        let layer = map.getLayer('cluster');
        if (!layer) {
          // 准备样式 style1 ，style2
          if (vue.clusterSymbol) {
            Util.extend(vue.style1, vue.clusterSymbol)
            Util.extend(vue.style2, vue.clusterSymbol)
          }
          if (vue.styleTag) {
            switch (vue.styleTag) {
              case 'common':
                vue.clusterLayer = CtMapUtils.clusterUtil.ctCreateCluster('cluster', arr, vue.style1);
                break
              case 'radiation':
                vue.clusterLayer = CtMapUtils.clusterUtil.ctCreateCluster('cluster', arr, vue.style2);
                break
              default:
                break
            }
          } else {
            vue.clusterLayer = CtMapUtils.clusterUtil.ctCreateCluster('cluster', arr, vue.style2);
          }
          vue.clusterLayer.addTo(map);
        } else {
          vue.clusterLayer = layer
          if (!vue.lazyRender) {
            vue.clusterLayer.clear()
            vue.clusterLayer.addMarker(arr)
          }
        }
        // 获取 聚集 点击事件的 监听 对象
        map.on('click dblclick', function (e) {
          switch (e.type) {
            case 'click':
              let event = vue.clusterLayer.identify(e.coordinate);
              vue.$emit('click', e, event)
              break
            case 'dblclick':
              let identify1 = vue.clusterLayer.identify(e.coordinate);
              vue.$emit('dblclick', e, identify1)
              break
            default:
              break
          }


        });
        vue.$emit('clusterLayer', vue.clusterLayer)
      });
    },
    /**
     * 根据 当前图层 和 当前点类型 进行 批量坐标转换，增加一个属性， 适配当前图层的坐标
     * @param originalPointList  含有车辆业务数据对象
     * @returns [{}]
     */
    localTransformXyBatch(originalPointList) {
      const arr = [];
      originalPointList.forEach((originalPoint) => {
        let proxyPoint = []
        proxyPoint.push(originalPoint.x)
        proxyPoint.push(originalPoint.y)
        originalPoint.transformedCoordinate = new Coordinate(proxyPoint)
        arr.push(originalPoint);
      });
      return arr
    },
  },
  computed: {},
  watch: {
    points: {
      handler: function (v) {
        this.renderCluster()
      },
      deep: true
    },
  },
};
</script>

